<template>
  <div v-if="!isMobile" class="supplier-top-bar">
    <createBtn @click.native="addSupplier" />
    <MoreOpeator
      v-if="hasRouteAuth('medium:supplier:edit')"
      ref="btnGroupRef"
      :list="[
        { label: '导入公司供应商', importApi: 'admin/supplier/manage/import', callback: fetchData, type: 'import', extendParams: { channelType: 1 } },
        { label: '导入个人供应商', importApi:'/admin/supplier/manage/import', callback: fetchData, type: 'import', extendParams: { channelType: 0 } },
        { label: '公司供应商模板', exportApi: 'admin/supplier/template/export', exportName: '公司供应商模板', isBeforeExport: false, type: 'export', queryData: { channelType: 1 } },
        { label: '个人供应商模板', exportApi: 'admin/supplier/template/export', exportName: '个人供应商模板', isBeforeExport: false, type: 'export', queryData: { channelType: 0 } },
      ]"
      style="margin-left:12px;"
    />
  </div>
  <div v-else class="supplier-top-bar">
    <MoreOpeator
      v-if="hasRouteAuth('medium:supplier:edit')"
      ref="btnGroupRef"
      :list="[
        { label: '导入公司供应商', importApi: 'admin/supplier/manage/import', callback: fetchData, type: 'import', extendParams: { channelType: 1 } },
        { label: '导入个人供应商', importApi:'/admin/supplier/manage/import', callback: fetchData, type: 'import', extendParams: { channelType: 0 } },
        { label: '公司供应商模板', exportApi: 'admin/supplier/template/export', exportName: '公司供应商模板', isBeforeExport: false, type: 'export', queryData: { channelType: 1 } },
        { label: '个人供应商模板', exportApi: 'admin/supplier/template/export', exportName: '个人供应商模板', isBeforeExport: false, type: 'export', queryData: { channelType: 0 } },
      ]"
      show-mobile-icon
      style="margin-left:0px !important;"
    />
    <createBtn mobile-table @click.native="addSupplier" />
  </div>
</template>
<script>
import { hasRouteAuth } from '@/utils/permission';

import createBtn from '@/components/Common/baseComponent/createBtn';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';

export default {
  components: { createBtn, MoreOpeator },
  props: {
    fetchData: { // 导入后列表刷新的方法
      type: Function,
      default: null
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    hasRouteAuth,
    addSupplier() {
      if (!this.hasRouteAuth('medium:supplier:edit')) {
        this.$confirm('您暂无供应商新增权限，请到用户管理-权限管理进行设置或联系管理员', '', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          center: true,
          iconClass: 'charge-icon',
          customClass: 'del-message del-message-cancel'
        }).catch(() => {
          return false;
        });
      } else {
        this.$emit('create');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.supplier-top-bar {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  background: #fff;
  align-items: center;
  .download-template {
    padding-top: 0;
    border-radius: 4px;
    width:32px;
    height:32px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 32px;
      height: 32px;
    }
  }
  .btn-right-item {
    line-height: 32px;
    font-size: 14px;
    font-weight: 700;
    margin-right: 16px;
    padding-top: 0;
  }
  .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    .create-btn {
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      margin-left: 16px;
      width:80px;
      height:32px;
      background:rgba(64,110,255,1);
      border-radius:4px;
      font-size:14px;
      font-weight:500;
      color:rgba(255,255,255,1);
      line-height:14px;
    }
  }
}
</style>
